// 定义变量
@float-diameter: 40px;
@float-right: 20px;
@float-bottom: calc(100vh / 2);

// 浮动按钮的基本样式
.float-ball {
    position: fixed;
    bottom: @float-bottom;
    right: @float-right;
    width: @float-diameter;
    height: @float-diameter;
    background-color: var(--bg-color-three);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;

    // 内部内容的样式
    .float-ball-content {
        width: calc(@float-diameter / 5 * 3);
        height: calc(@float-diameter / 5 * 3);

        // 内部SVG的样式
        > svg {
            width: 100%;
            height: 100%;
            fill: white;
        }
    }

    // 鼠标悬停状态
    &.hovered {
        transform: scale(1.2);
        opacity: 1;
    }

    // 空闲状态（靠边）
    &.idle {
        transform: translateX(calc(@float-diameter / 2 + @float-right)) scale(0.7);
        opacity: 0.5;
    }
}

.form-util-main {
    // 标题样式
    .form-util-title {
        h2 {
            margin: 0 10px 0 0;
            display: inline-block;
        }
        span {
            color: #969a9f;
        }
        margin-bottom: 10px;
    }

    // 内容样式
    .form-util-content {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}